<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>脚标机分布</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <!-- App favicon -->
    <link rel="shortcut icon" href="assets/images/favicon.ico">


    <!-- App css -->
    <link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="assets/css/icons.css" rel="stylesheet" type="text/css" />
    <link href="assets/css/metismenu.min.css" rel="stylesheet" type="text/css" />
    <link href="assets/css/style_dark.css" rel="stylesheet" type="text/css" />

    <!-- layer插件 -->
    <link rel="stylesheet" type="text/css" href="plugins/layer2.4/skin/layer.css" />
    <link rel="stylesheet" type="text/css" href="plugins/layui2/css/layui.css" />

    <!-- datatables插件 -->
    <link href="plugins/datatables/dataTables.bootstrap4.min.css" rel="stylesheet" type="text/css" />
    <link href="plugins/datatables/buttons.bootstrap4.min.css" rel="stylesheet" type="text/css" />
    <link href="plugins/datatables/responsive.bootstrap4.min.css" rel="stylesheet" type="text/css" />
    <!-- 折叠插件
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> -->

    <link rel="stylesheet" type="text/css" href="assets/css/custom.css" />
    <script src="assets/js/modernizr.min.js"></script>

    <style>
        .mapLeft {
            width: 29%;
            height: 550px;
            margin-right: 1%;
            /* background-color: black; */
            float: left;
            overflow: auto;
        }

        .allBarcodeMachine {
            width: 100%;
            /* height: 79%; */
            /* background-color: plum; */
            /* overflow-y: auto; */
        }

        .mapRight {
            width: 70%;
            height: 550px;
            /* background-color: pink; */
            float: left;
        }
    </style>
</head>

<body>

    <!-- Begin page -->
    <div id="wrapper">

        <!-- ========== 左边侧边栏代码 ========== -->
        <div class="left side-menu">

            <div class="slimscroll-menu" id="remove-scroll">

                <!-- LOGO -->
                <div class="topbar-left">
                    <a href="index.html" class="logo">
                        <span>
                            <img src="assets/images/logo.png" alt="" height="22">
                        </span>
                        <i>
                            <img src="assets/images/logo_sm.png" alt="" height="28">
                        </i>
                    </a>
                </div>

                <!-- 用户区域 -->
                <div class="user-box">
                    <!-- <div class="user-img">
							<img src="assets/images/users/avatar-1.jpg" alt="user-img" title="Mat Helme" class="rounded-circle img-fluid">
						</div>
						<h5><a href="#">超级管理员</a> </h5>
						<p class="text-muted">超管</p> -->
                </div>

                <!--- 侧边菜单 -->
                <div id="sidebar-menu">

                    <ul class="metismenu" id="side-menu">
                        <!-- 主页 -->
                    </ul>

                </div>
                <!-- Sidebar -->

                <div class="clearfix"></div>

            </div>
            <!-- Sidebar -left -->

        </div>
        <!-- Left Sidebar End -->

        <!-- ============================================================== -->
        <!-- 页面内容开始 -->
        <!-- ============================================================== -->

        <div class="content-page">

            <!-- 头部横条 -->
            <div class="topbar">

                <nav class="navbar-custom">

                    <ul class="list-unstyled topbar-right-menu float-right mb-0">
                        <!-- 通知 -->
                        <li class="dropdown notification-list">
                            <!-- <a class="nav-link dropdown-toggle arrow-none" data-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false">
                                <i class="fi-bell noti-icon"></i>
                                <span class="badge badge-danger badge-pill noti-icon-badge">4</span>
                            </a> -->
                            <div class="dropdown-menu dropdown-menu-right dropdown-menu-animated dropdown-lg">

                                <!-- item-->
                                <div class="dropdown-item noti-title">
                                    <h5 class="m-0"><span class="float-right"><a href="" class="text-dark"><small>Clear
                                                    All</small></a> </span>Notification</h5>
                                </div>

                                <div class="slimscroll" style="max-height: 230px;">
                                    <!-- item-->
                                    <a href="javascript:void(0);" class="dropdown-item notify-item">
                                        <div class="notify-icon bg-success"><i
                                                class="mdi mdi-comment-account-outline"></i></div>
                                        <p class="notify-details">Caleb Flakelar commented on Admin<small
                                                class="text-muted">1 min ago</small></p>
                                    </a>

                                    <!-- item-->
                                    <a href="javascript:void(0);" class="dropdown-item notify-item">
                                        <div class="notify-icon bg-info"><i class="mdi mdi-account-plus"></i></div>
                                        <p class="notify-details">New user registered.<small class="text-muted">5 hours
                                                ago</small></p>
                                    </a>

                                    <!-- item-->
                                    <a href="javascript:void(0);" class="dropdown-item notify-item">
                                        <div class="notify-icon bg-danger"><i class="mdi mdi-heart"></i></div>
                                        <p class="notify-details">Carlos Crouch liked <b>Admin</b><small
                                                class="text-muted">3 days ago</small></p>
                                    </a>

                                    <!-- item-->
                                    <a href="javascript:void(0);" class="dropdown-item notify-item">
                                        <div class="notify-icon bg-warning"><i
                                                class="mdi mdi-comment-account-outline"></i></div>
                                        <p class="notify-details">Caleb Flakelar commented on Admin<small
                                                class="text-muted">4 days ago</small></p>
                                    </a>

                                    <!-- item-->
                                    <a href="javascript:void(0);" class="dropdown-item notify-item">
                                        <div class="notify-icon bg-purple"><i class="mdi mdi-account-plus"></i></div>
                                        <p class="notify-details">New user registered.<small class="text-muted">7 days
                                                ago</small></p>
                                    </a>

                                    <!-- item-->
                                    <a href="javascript:void(0);" class="dropdown-item notify-item">
                                        <div class="notify-icon bg-custom"><i class="mdi mdi-heart"></i></div>
                                        <p class="notify-details">Carlos Crouch liked <b>Admin</b><small
                                                class="text-muted">13 days ago</small></p>
                                    </a>
                                </div>

                                <!-- All-->
                                <a href="javascript:void(0);"
                                    class="dropdown-item text-center text-primary notify-item notify-all">
                                    View all <i class="fi-arrow-right"></i>
                                </a>

                            </div>
                        </li>

                        <li class="dropdown notification-list tabUser">
                            <a class="nav-link dropdown-toggle nav-user" data-toggle="dropdown" href="#" role="button"
                                aria-haspopup="false" aria-expanded="false">
                                <img src="assets/images/users/avatar-1.jpg" alt="user" class="rounded-circle"> <span
                                    class="ml-1">超级管理员<i class="mdi mdi-chevron-down"></i> </span>
                            </a>
                            <div class="dropdown-menu dropdown-menu-right dropdown-menu-animated profile-dropdown">
                                <!-- item-->
                                <div class="dropdown-item noti-title">
                                    <h6 class="text-overflow m-0">欢迎使用</h6>
                                </div>

                                <!-- item-->
                                <a href="javascript:void(0);" class="dropdown-item notify-item">
                                    <i class="fi-head"></i> <span>我的信息</span>
                                </a>

                                <!-- item-->
                                <a href="javascript:void(0);" class="dropdown-item notify-item">
                                    <i class="fi-lock"></i> <span>锁屏</span>
                                </a>

                                <!-- item-->
                                <a href="javascript:void(0);" class="dropdown-item notify-item">
                                    <i class="fi-power"></i> <span>退出</span>
                                </a>

                            </div>
                        </li>

                    </ul>
                    <!-- 导航  -->
                    <ul class="list-inline menu-left mb-0">
                        <li class="float-left">
                            <button class="button-menu-mobile open-left disable-btn">
                                <i class="dripicons-menu"></i>
                            </button>
                        </li>
                        <li>
                            <div class="page-title-box">
                                <h4 class="page-title">脚标机监控管理 </h4>
                                <ol class="breadcrumb">
                                    <li class="breadcrumb-item"><a href="#">脚标机监控管理</a></li>
                                    <li class="breadcrumb-item active">脚标机分布</li>
                                </ol>
                            </div>
                        </li>

                    </ul>

                </nav>

            </div>
            <!-- 头顶标签结束 -->

            <!-- Start Page content -->
            <div class="content">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-12">
                            <div class="mapLeft">
                                <div class="themed-grid-col">
                                    <label for="town">请选择市</label>
                                    <select class="form-control" id="town">
                                    </select>
                                </div>
                                <div class="themed-grid-col">
                                    <label for="district">请选择区</label>
                                    <select class="form-control" id="district">
                                    </select>
                                </div>
                                <div class="themed-grid-col">
                                    <label for="market">请选择市场</label>
                                    <select class="form-control" id="market">

                                    </select>
                                </div>
                                <div class="allBarcodeMachine">
                                    <div id="accordion">
                                        <div class="card">
                                            <div class="card-header" id="headingOne">
                                                <h5 class="mb-0">
                                                    <button class="btn btn-link" data-toggle="collapse"
                                                        data-target="#collapseOne" aria-expanded="true"
                                                        aria-controls="collapseOne"
                                                        style="color:black;margin:0;padding:0">
                                                        在线
                                                    </button>
                                                </h5>
                                            </div>

                                            <div id="collapseOne" class="collapse show" aria-labelledby="headingOne"
                                                data-parent="#accordion">
                                                <div class="card-body">
                                                    <table id="datatableOne"
                                                        class="table table-bordered dt-responsive nowrap"
                                                        style="border-collapse: collapse; border-spacing: 0; width: 100%;">
                                                        <thead>
                                                            <tr>
                                                                <th>序号</th>
                                                                <th>档口名称</th>
                                                                <th>脚标机编号</th>
                                                            </tr>
                                                        </thead>

                                                        <tbody id="tbodyOne">
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="card">
                                            <div class="card-header" id="headingTwo">
                                                <h5 class="mb-0">
                                                    <button class="btn btn-link collapsed" data-toggle="collapse"
                                                        data-target="#collapseTwo" aria-expanded="false"
                                                        aria-controls="collapseTwo"
                                                        style="color:black;margin:0;padding:0">
                                                        离线
                                                    </button>
                                                </h5>
                                            </div>
                                            <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo"
                                                data-parent="#accordion">
                                                <div class="card-body">
                                                    <table id="datatableTwo"
                                                        class="table table-bordered dt-responsive nowrap"
                                                        style="border-collapse: collapse; border-spacing: 0; width: 100%;">
                                                        <thead>
                                                            <tr>
                                                                <th>序号</th>
                                                                <th>档口名称</th>
                                                                <th>脚标机编号</th>
                                                            </tr>
                                                        </thead>

                                                        <tbody id="tbodyTwo">
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="card">
                                            <div class="card-header" id="headingThree">
                                                <h5 class="mb-0">
                                                    <button class="btn btn-link collapsed" data-toggle="collapse"
                                                        data-target="#collapseThree" aria-expanded="false"
                                                        aria-controls="collapseThree"
                                                        style="color:black;margin:0;padding:0">
                                                        故障
                                                    </button>
                                                </h5>
                                            </div>
                                            <div id="collapseThree" class="collapse" aria-labelledby="headingThree"
                                                data-parent="#accordion">
                                                <div class="card-body">
                                                    <table id="datatableThree"
                                                        class="table table-bordered dt-responsive nowrap"
                                                        style="border-collapse: collapse; border-spacing: 0; width: 100%;">
                                                        <thead>
                                                            <tr>
                                                                <th>序号</th>
                                                                <th>档口名称</th>
                                                                <th>脚标机编号</th>
                                                            </tr>
                                                        </thead>

                                                        <tbody id="tbodyThree">
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="mapRight">
                                <fieldset class="demo_content">
                                    <div style="min-height: 550px; width: 100%;" id="map">
                                    </div>
                                </fieldset>
                            </div>
                        </div>
                    </div>
                    <!-- end row -->
                </div>
                <!-- container -->

            </div>
            <!-- content -->

            <!-- <footer class="footer">

            </footer> -->

        </div>

        <!-- ============================================================== -->
        <!-- End Right content here -->
        <!-- ============================================================== -->

    </div>
    <!-- END wrapper -->

    <!-- jQuery  -->
    <script src="assets/js/jquery.min.js"></script>
    <script src="assets/js/bootstrap.bundle.min.js"></script>
    <script src="assets/js/navigate.js"></script>
    <script>
        var roleName = getCookie("roleName")
        createNavigate(roleName)
    </script>
    <script src="assets/js/metisMenu.min.js"></script>
    <script src="assets/js/waves.js"></script>
    <script src="assets/js/jquery.slimscroll.js"></script>

    <!-- App js -->

    <script src="assets/js/jquery.core.js"></script>
    <script src="assets/js/jquery.app.js"></script>

    <!-- layer插件 -->
    <script src="plugins/layer2.4/layer.js" type="text/javascript" charset="utf-8"></script>
    <script src="plugins/layui2/layui.js" type="text/javascript" charset="utf-8"></script>
    <!-- datatables插件 -->
    <script src="plugins/datatables/jquery.dataTables.min.js"></script>
    <script src="plugins/datatables/dataTables.bootstrap4.min.js"></script>
    <script src="plugins/datatables/dataTables.responsive.min.js"></script>
    <script src="plugins/datatables/responsive.bootstrap4.min.js"></script>

    <script src="//cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js"></script>

    <script src="assets/js/custom.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        // // 获取省市
        // function getProvince(province, town) {
        //     $('#province').val(province)
        //     $.ajax({
        //         type: 'get',
        //         url: `${URL}slaughterHouse/findCity?province=${province}`,
        //         dataType: 'json',
        //         async: false,
        //         success: (data) => {
        //             data = data.object
        //             let items = ``
        //             data = ['中山市']
        //             data.forEach(e => {
        //                 items += `<option value="${e}">${e}</option>`
        //             })
        //             $('#town').html(items)
        //             $("#town").change(() => {
        //                 town = $("#town").val()
        //                 getDistrict(province, town) //调用区
        //             })
        //             getDistrict(province, town)
        //         },
        //         error: (data) => {
        //             // alert('获取省份失败')
        //         }
        //     })
        // }
        // // 获取区
        // function getDistrict(province, town) {
        //     let items = ''
        //     let data = ['黄圃镇', '南头镇', '东凤镇', '阜沙镇', '小榄镇', '东升镇', '古镇镇', '横栏镇', '三角镇', '民众镇', '南朗镇', '港口镇', '大涌镇',
        //         '沙溪镇', '三乡镇', '板芙镇', '神湾镇', '坦洲镇'
        //     ]
        //     let districtName = data[0] //初始化
        //     data.forEach(e => {
        //         items += `<option value="${e}">${e}</option>`
        //     })
        //     $('#district').html(items)
        //     $("#district").change(() => {
        //         districtName = $("#district").val()
        //         getMarket(province, town, districtName) //调用区
        //     })
        //     getMarket(province, town, districtName)
        // }
        // // 获取市场
        // // var tableEquipment, tableSell
        // //  省/市/区
        // function getMarket(province, town, district) {
        //     $.ajax({
        //         type: 'get',
        //         url: `${URL}slaughterHouse/findByDistrict?province=${province}&city=${town}&district=${district}`,
        //         dataType: 'json',
        //         async: false,
        //         success: (data) => {
        //             if (data.status == 2) {
        //                 // alert(data.msg)
        //                 return
        //             }
        //             data = data.object
        //             let marketId = data[0].id //初始化
        //             let items = ''
        //             data.forEach(e => {
        //                 items += `<option value="${e.name}">${e.name}</option>`
        //             })
        //             let poultryId = 'all' //初始化
        //             poultryParentName = '全部'
        //             $('#market').html(items)
        //             $("#district").change(() => {
        //                 marketId = $("#market").val()
        //                 if (!marketId) {
        //                     return
        //                 }
        //                 // marketChange(marketId)
        //                 townName = $('#town').val();
        //                 marketName = $('#market').val();
        //                 refresh()
        //                 initData(townName, marketName)

        //             })
        //             $("#market").change(() => {
        //                 marketId = $("#market").val()
        //                 if (!marketId) return
        //                 // marketChange(marketId)
        //                 // console.log(marketId);
        //                 townName = $('#town').val();
        //                 marketName = $('#market').val();
        //                 refresh()
        //                 initData(townName, marketName)

        //             })
        //         },
        //         error: () => {
        //             // alert('请求市场失败')
        //         }
        //     })
        // }

        // 存放市名和市场名
        var townName, marketName;

        // 存放所有的脚标机
        var allMachine = new Array();
        // 存放 正常/在线 的脚标机
        var normal = new Array();
        // 存放 离线 的脚标机
        var offLine = new Array();
        // 存放 卡纸/故障 的脚标机
        var fault = new Array();

        // 表格部分
        var datatableOne, datatableTwo, datatableThree;

        function initData() {
            // 初始化表格
            normal = [{barcodeMachineId: "010101010006",stallsName: "罗海档",longitude:113.15537,latitude:22.401869}]
            offLine = [{barcodeMachineId: "010101010001",stallsName: "罗海档"},{barcodeMachineId: "010101010004",stallsName: "罗海档"},{barcodeMachineId: "010101010000",stallsName: "罗海档"}]
            fault = [{barcodeMachineId: "030303030303",stallsName: "罗海档"},{barcodeMachineId: "010101010002",stallsName: "罗海档"}]
            // 在线表格
            for (let i = 0; i < normal.length; i++) {
                var tbodyOne = $('<tr class="text-c">' +
                    '<td>' + (i + 1) + '</td>' +
                    '<td>' + normal[i].stallsName + '</td>' +
                    '<td>' + normal[i].barcodeMachineId + '</td>' +
                    '</tr>')
                $("#tbodyOne").append(tbodyOne)
            }
            // 离线表格
            for (let i = 0; i < offLine.length; i++) {
                var tbodyTwo = $('<tr class="text-c">' +
                    '<td>' + (i + 1) + '</td>' +
                    '<td>' + offLine[i].stallsName + '</td>' +
                    '<td>' + offLine[i].barcodeMachineId + '</td>' +
                    '</tr>')
                $("#tbodyTwo").append(tbodyTwo)
            }
            // 故障表格
            for (let i = 0; i < fault.length; i++) {
                var tbodyThree = $('<tr class="text-c">' +
                    '<td>' + (i + 1) + '</td>' +
                    '<td>' + fault[i].stallsName + '</td>' +
                    '<td>' + fault[i].barcodeMachineId + '</td>' +
                    '</tr>')
                $("#tbodyThree").append(tbodyThree)
            }
            // 每个表格的item数目
            $(".btn-link")[0].innerText = "在线  " + normal.length + "（台）"
            $(".btn-link")[1].innerText = "离线  " + offLine.length + "（台）"
            $(".btn-link")[2].innerText = "故障  " + fault.length + "（台）"

            map_load()
        }

        // // 初始化地图、表格数据
        // function initData(name1, name2) {
        //     var url = window.location.pathname; //获取url
        //     url = decodeURI(url.split("/")[1]);
        //     $.ajax({
        //         type: "GET",
        //         url: URL + 'barcodeMachineDistribution?name1=' + name1 + '&name2=' + name2,
        //         async: false,
        //         dataType: "json",

        //         beforeSend: function (xhr) {
        //             xhr.setRequestHeader("Authorization", `Bearer/${url}`);
        //         },

        //         success: function (data) {
        //             if (data.object.length == 0) {
        //                 data = ''
        //                 layer.msg("当前市场没有在线的脚标机", {
        //                     icon: 2,
        //                     time: 1000
        //                 });
        //             } else {
        //                 data = data.object
        //             }
        //             console.log(data);
        //             // 使用数组前置空
        //             allMachine = [];
        //             normal = [];
        //             offLine = [];
        //             fault = [];
        //             // 获取所有状态的脚标机，存入数组
        //             for (let i = 0; i < data.length; i++) {
        //                 if (data[i].list.length != 0) {
        //                     allMachine.push(data[i].list[0])
        //                 }
        //             }

        //             // 分配存放好各个状态的脚标机
        //             for (let i = 0; i < allMachine.length; i++) {
        //                 if (allMachine[i].state === "0") {
        //                     offLine.push(allMachine[i])
        //                 } else if (allMachine[i].state === "1") {
        //                     normal.push(allMachine[i])
        //                 } else if (allMachine[i].state === "2") {
        //                     fault.push(allMachine[i])
        //                 }
        //             }
        //             // console.log(offLine);
        //             // console.log(normal);
        //             // console.log(fault);
        //             // 初始化表格
        //             // 在线表格
        //             for (let i = 0; i < normal.length; i++) {
        //                 var tbodyOne = $('<tr class="text-c">' +
        //                     '<td>' + (i + 1) + '</td>' +
        //                     '<td>' + normal[i].stallsName + '</td>' +
        //                     '<td>' + normal[i].barcodeMachineId + '</td>' +
        //                     '</tr>')
        //                 $("#tbodyOne").append(tbodyOne)
        //             }
        //             // 离线表格
        //             for (let i = 0; i < offLine.length; i++) {
        //                 var tbodyTwo = $('<tr class="text-c">' +
        //                     '<td>' + (i + 1) + '</td>' +
        //                     '<td>' + offLine[i].stallsName + '</td>' +
        //                     '<td>' + offLine[i].barcodeMachineId + '</td>' +
        //                     '</tr>')
        //                 $("#tbodyTwo").append(tbodyTwo)
        //             }
        //             // 故障表格
        //             for (let i = 0; i < fault.length; i++) {
        //                 var tbodyThree = $('<tr class="text-c">' +
        //                     '<td>' + (i + 1) + '</td>' +
        //                     '<td>' + fault[i].stallsName + '</td>' +
        //                     '<td>' + fault[i].barcodeMachineId + '</td>' +
        //                     '</tr>')
        //                 $("#tbodyThree").append(tbodyThree)
        //             }
        //             // 每个表格的item数目
        //             $(".btn-link")[0].innerText = "在线  " + normal.length + "（台）"
        //             $(".btn-link")[1].innerText = "离线  " + offLine.length + "（台）"
        //             $(".btn-link")[2].innerText = "故障  " + fault.length + "（台）"
        //         },
        //         error: function (XMLHttpRequest, textStatus, errorThrown) {
        //             networkError(XMLHttpRequest, textStatus, errorThrown)
        //         }
        //     })

        //     map_load()
        // }

        $(document).ready(function () {
            // 假数据
            let makeProvince = `<option value="中山市">中山市</option>`
            $('#town').html(makeProvince)
            let makeDistrict = `<option value="小榄镇">小榄镇</option>`
            $('#district').html(makeDistrict)
            let makeMarket = `<option value="中山市小榄三鸟综合交易中心">中山市小榄三鸟综合交易中心</option>`
            $('#market').html(makeMarket)

            // getProvince('广东省', '中山市')
            townName = $('#town').val();
            marketName = $('#market').val();
            // initData(townName, marketName)

            // 假数据
            initData()
        })

        function refresh() {
            // 清空表格数据
            $("#datatableOne  tr:not(:first)").html("");
            $("#datatableTwo  tr:not(:first)").html("");
            $("#datatableThree  tr:not(:first)").html("");
        }

        function map_init() {
            var map = new BMap.Map("map"); // 创建Map实例
            var point = new BMap.Point(normal[0].longitude, normal[0].latitude); //地图中心点
            map.centerAndZoom(point, 13); // 初始化地图,设置中心点坐标和地图级别。
            map.enableScrollWheelZoom(true); //启用滚轮放大缩小
            //向地图中添加缩放控件
            var ctrlNav = new window.BMap.NavigationControl({
                anchor: BMAP_ANCHOR_TOP_LEFT,
                type: BMAP_NAVIGATION_CONTROL_LARGE
            });
            map.addControl(ctrlNav);

            //向地图中添加缩略图控件
            var ctrlOve = new window.BMap.OverviewMapControl({
                anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
                isOpen: 1
            });
            map.addControl(ctrlOve);

            //向地图中添加比例尺控件
            var ctrlSca = new window.BMap.ScaleControl({
                anchor: BMAP_ANCHOR_BOTTOM_LEFT
            });
            map.addControl(ctrlSca);

            var point = new Array(); //存放标注点经纬信息的数组
            var marker = new Array(); //存放标注点对象的数组
            var info = new Array(); //存放提示信息窗口对象的数组
            for (let i = 0; i < normal.length; i++) {
                // var p0 = normal[i].longitude;
                // var p1 = normal[i].latitude;
                point[i] = new window.BMap.Point(normal[i].longitude, normal[i].latitude); //循环生成新的地图点
                marker[i] = new window.BMap.Marker(point[i]); //按照地图点坐标生成标记
                map.addOverlay(marker[i]);
                // var label = new window.BMap.Label(normal[i].title, {
                //     offset: new window.BMap.Size(20, -10)
                // });
                // marker[i].setLabel(label);
                info[i] = new window.BMap.InfoWindow("<p><br>脚标机编号：" + normal[i].barcodeMachineId +
                    "</br></p>"); // 创建信息窗口对象

                marker[i].addEventListener("mouseover", function () {
                    this.openInfoWindow(info[i]);
                });
            }
        }
        //异步调用百度js
        function map_load() {
            var load = document.createElement("script");
            load.src = "http://api.map.baidu.com/api?v=1.4&callback=map_init";
            document.body.appendChild(load);
        }
        window.onload = map_load;
    </script>

</body>

</html>